<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/shouye.css"/>
		<link rel="stylesheet" type="text/css" href="css/carousel.css"/>
	</head>
	<body>
		<div class="xiagu">
			<header class="mod_header">
        		<span class="music_logo">QQ音乐</span>
        		<a href="javascript:;" class="btn_download">下载APP</a>
   			</header>
   			<div class="xuanxiangka">
   				<ul class="xuanxiangkabox">
					<li class="xuanxiang xiakuang">推荐</li>
					<li class="xuanxiang">排行榜</li>
					<li class="xuanxiang">搜索</li>
					<div class="clear"></div>
				</ul>
				<div class="div ac tuijian">
					<div class="carousel_wrap">
						<div class="lunbo_wrap">
							<!--轮播图的容器-->
							<ul class="pic_box">
								<li><img src="https://y.gtimg.cn/music/photo_new/T003R720x288M000001BU5yx2BF2d0.jpg?max_age=2592000" alt="" /></li>
								<li><img src="https://y.gtimg.cn/music/photo_new/T003R720x288M000001PEJP81E3Hao.jpg?max_age=2592000" alt="" /></li>
								<li><img src="https://y.gtimg.cn/music/photo_new/T003R720x288M000003fVARa3SXbKM.jpg?max_age=2592000" alt="" /></li>
								<li><img src="https://y.gtimg.cn/music/photo_new/T003R720x288M000004HdCUR1DRucx.jpg?max_age=2592000" alt="" /></li>
								<li><img src="https://y.gtimg.cn/music/photo_new/T003R720x288M000000iLJtk27URYN.jpg?max_age=2592000" alt="" /></li>
							</ul>
							<!--底部的控制点-->
							<ul class="pannel"></ul>
							<!--左右箭头-->
							<span id="left_arrow">&lt;</span>
							<span id="right_arrow">&gt;</span>
						</div>
					</div>
				</div>
				<div class="div paihangbang">
					<div class="pai"></div>
				</div>
				<div class="div ss">
					<div class="sousuo">
						<div class="sousuobox">
							<span><img src="img/sousuo.png"/></span>
							<form action="" method="post">
								<input type="text" placeholder="搜索歌曲、歌单、专辑" />
								<span class="quxiao">取消</span>
							</form>
						</div>
					</div>
					<div class="remen">
						<div class="remenbox">
							<div>热门搜索</div>
							<!--<div class="remensousuo">-->
								<a href="#" class="jihuo">我是歌手第三季</a>
								<a href="#">JUST LIKE THIS</a>
								<a href="#">文爱 </a>
							<!--</div>-->
							<!--<div class="remensousuo">-->
								<a href="#">像我这样的人 </a>
								<a href="#">普通DISCO </a>
								<a href="#">我们不一样  </a>
							<!--</div>-->
							<!--<div class="remensousuo">-->
								<a href="#">PSYCHO </a>
								<a href="#">等你下课 </a>
								<a href="#">专属情歌  </a>
								<a href="#">离人 </a>
							<!--</div>-->
						</div>
					</div>
				</div>
   			</div>
		</div>
		<script type="text/javascript">
			var li = document.querySelectorAll(".xuanxiangka ul li");
			var div = document.querySelectorAll(".div");
//			打印结果
			console.log(li[0]);
			console.log(div);
			for(let i=0;i<li.length;i++){
				li[i].addEventListener("click",function(){
					//给对应的div添加显示样式
					for(var j=0;j<div.length;j++){
						li[j].style.color="black";
						div[j].classList.remove("ac");
					} 
					li[i].style.color="green";
					div[i].classList.add("ac");
				})
			}
			function sousuokuang(){
				var input = document.querySelector("input");
				var remen = document.querySelector(".remen");
				var kuang = document.querySelector(".sousuobox");
				var quxiao = document.querySelector(".quxiao");
				console.log(remen);
				input.addEventListener("click",function(){
					remen.style.display="none";
					kuang.style.width="80%";
					quxiao.style.display="block";
				})
				quxiao.addEventListener("click",function(){
					remen.style.display="block";
					kuang.style.width="100%";
					quxiao.style.display="inline-block";
					quxiao.style.display="none";
				})
			}
			sousuokuang()
			
			var domain = " https://www.easy-mock.com/mock/5aaa3dc2a0732407530b8b37/example"
			
			function ajax(method,url,data){
				var xhr = new XMLHttpRequest();
				xhr.open(method,url);
//				xhr.setRequestHeader("Authorization","Bluejj");
				xhr.send(data)
				xhr.addEventListener("readystatechange",function(){
					if(xhr.status==200&&xhr.readyState==4){
//						return xhr.response;
//						异步操作在回调函数的作用域内处理数据
						console.log(xhr.response)
						shengge(xhr.response);
						dier(xhr.response);
					}
				})
			}
			ajax("GET",domain+"/tuijian");
			function phb(method,url,data){
				var xhr = new XMLHttpRequest();
				xhr.open(method,url);
//				xhr.setRequestHeader("Authorization","Bluejj");
				xhr.send(data)
				xhr.addEventListener("readystatechange",function(){
					if(xhr.status==200&&xhr.readyState==4){
//						return xhr.response;
//						异步操作在回调函数的作用域内处理数据
						console.log(xhr.response)
						paihangbang(xhr.response);
					}
				})
			}
			phb("GET",domain+"/herunsheng");
			function shengge(res){
				var res = JSON.parse(res);
				var userInfo = res.data.radioList;
				console.log(userInfo);
				var template="";
				userInfo.forEach(function(el){
					template+=`<div class="diyi">
					<a href="">
						<div><img src=${el.picUrl} /></div>
						<p>${el.Ftitle}</p>
					</a>
					</div>`
				})
//				文档碎片
				var cdf = document.createDocumentFragment();
//				如何创建容器
				var diantai = document.createElement('div');
				diantai.classList.add("diantai")
    			diantai.innerHTML = '电台';
    			document.querySelector(".tuijian").appendChild(diantai);
    			
				var baba = document.createElement("div");
				baba.classList.add("baba");
				baba.innerHTML+=template;
				cdf.appendChild(baba);
//				将baba添加到页面上
				document.querySelector(".tuijian").appendChild(cdf);
			}
			function dier(res){
				var res = JSON.parse(res);
				var userInfo = res.data.songList;
				console.log(userInfo);
				var template="";
				userInfo.forEach(function(el){
					template+=`<div class="dierbox">
					<a href="yinyue.html">
						<div><img src=${el.picUrl} /></div>
						<p>${el.songListDesc}</p>
					</a>
					</div>`
				})
//				文档碎片
				var cdf = document.createDocumentFragment();
//				如何创建容器
				var remen = document.createElement('div');
				remen.classList.add("diantai")
    			remen.innerHTML = '热门歌单';
    			document.querySelector(".tuijian").appendChild(remen);
				var baba = document.createElement("div");
				baba.classList.add("dier");
				baba.innerHTML+=template;
				cdf.appendChild(baba);
//				将baba添加到页面上
				document.querySelector(".tuijian").appendChild(cdf);
			}
			function paihangbang(res){
				var res = JSON.parse(res);
				console.log("res:",res)
				var userInfo = res.data.topList;
				console.log("userInfo:",userInfo);
				var template="";
				userInfo.forEach(function(el){
					template+=`<div class="paihangbangbox">
					<a href="https://y.qq.com/w/toplist.html?ADTAG=myqq&from=myqq&channel=10007100&id=${el.id}&type=top">
						<div class="tupian"><img src="${el.picUrl}" /></div>
						<div class="clear"></div>
						<p class="biaoti">${el.topTitle}</p>
						<p>${z(el.songList)}</p>
					</a>
					</div>`
					console.log(el);
				});
				function z(list){
					var template="";
					list.forEach(function(ele,index){
						console.log(ele)
						template+=`<p><span>${index+1}</span>${ele.songname}<span>-${ele.singername}</span></p>`
						
					});
					return template;
				}
//				文档碎片
				var cdf = document.createDocumentFragment();
//				如何创建容器
				var baba = document.createElement("div");
				
				baba.classList.add("paihangbang");
				baba.innerHTML+=template;
				cdf.appendChild(baba);
//				将baba添加到页面上
				document.querySelector(".paihangbang").appendChild(cdf);
			}
		</script>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/carousel.js"></script>
		<script type="text/javascript">
			new lunbo(".carousel_wrap",280/700);
		</script>
	</body>
</html>
